<!--<template>-->
<!--  <div class="MsContainer">-->
<!--    <div class="MsPage">-->
<!--        <Note :parentWidth="width" :parentHeight="height" />-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import Note from "@/components/Note";-->
<!--import { ref, onMounted } from 'vue';-->

<!--export default {-->
<!--  name: "Message",-->

<!--  components: {-->
<!--    Note-->
<!--  },-->

<!--  setup() {-->
<!--    const width = ref(0);-->
<!--    const height = ref(0);-->

<!--    onMounted(() => {-->
<!--      // 获取父组件的宽高-->
<!--      width.value = document.querySelector('.MsPage').clientWidth;-->
<!--      height.value = document.querySelector('.MsPage').clientHeight;-->
<!--    });-->

<!--    return {-->
<!--      width,-->
<!--      height,-->
<!--    };-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.MsContainer {-->
<!--  width: 1500px;-->
<!--  height: 110vh;-->
<!--  margin: 0 auto;-->
<!--  background-color: #03a9f4;-->
<!--}-->

<!--.MsPage {-->
<!--  width: 1200px;-->
<!--  height: 80vh;-->
<!--  margin: 0 auto;-->
<!--  background-color: #ccc;-->
<!--}-->
<!--</style>-->


<template>
  <div class="MsContainer">
    <div class="MsPage">
      <Note :parentWidth="width" :parentHeight="height" />
    </div>
  </div>
</template>

<script>
import Note from "@/components/Note";
import { ref, onMounted } from 'vue';

export default {
  name: "Message",

  components: {
    Note
  },

  setup() {
    const width = ref(0);
    const height = ref(0);

    onMounted(() => {
      // 获取父组件的宽高
      width.value = document.querySelector('.MsPage').clientWidth;
      height.value = document.querySelector('.MsPage').clientHeight;
    });

    return {
      width,
      height,
    };
  },
};
</script>

<style scoped>
.MsContainer {
  width: 1500px;
  height: 110vh;
  margin: 0 auto;
  background-color: #03a9f4;
}

.MsPage {
  width: 100%;
  height: 80vh;
  margin: 0 auto;
  background-color: #ccc;
}
</style>


